
<script setup>
import { ref,onMounted } from 'vue'


import * as THREE from 'three';
import CreateTwin from '../twin/CreateTwin.js';

const webgl = ref(null);



onMounted(() => {
  // 实例化一个CreateTwin对象
  const twin = new CreateTwin({
    container:webgl.value
  });

  //jit.gltf模型加载
    twin.gltfLoader.load('./models/ghost.glb',function(gltf){
        twin.scene.add(gltf.scene);
        const axes=new THREE.AxesHelper(2);
        gltf.scene.add(axes);
        gltf.scene.position.set(1,0,0);
        console.log(gltf);
    })

    //添加一个光源方便观察模型
    const ambient = new THREE.AmbientLight(0xffffff, 1.0);
    twin.scene.add(ambient);
});

</script>
<template>
  <div ref="webgl"><!-- 想在这里插入threejs canvas画布 --></div>
</template>
    

